<template>
  <div>
    <el-form ref="myform" :model="requireInfo" :rules="rules" label-width="100px" size="mini">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="资产分类" prop="smallTypeCode">
            <treeselect
              v-model="requireInfo.smallTypeCode"
              :multiple="false"
              :options="typeOptions"
              placeholder="选择资产类型"
              :disable-branch-nodes="true"
              @input="inputType"
              @select="selectType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="数量" prop="quantity">
            <el-input-number v-model.trim="requireInfo.quantity" :min="1" :precision="0" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="规格型号" prop="specifications">
            <!-- <el-input v-model="requireInfo.specifications" placeholder="请填写规格型号" /> -->
            <!-- <el-select v-model="specifications" clearable placeholder="请选择规格型号" @change="change">
              <el-option v-for="item in specificationList" :key="item.id" :label="item.specification" :value="item.specification" />
            </el-select> -->
            <el-autocomplete v-model="requireInfo.specifications" style="width: 100%;" :fetch-suggestions="querySearch" placeholder="请输入规格型号" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="需求明细" prop="detail">
            <el-input v-model="requireInfo.detail" placeholder="请填写需求明细" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import treeselect from '@neu/biz-core/components/TreeSelect'
import { tree } from '@neu/dcam-ui/api/assetType'
import { list } from '@neu/dcam-ui/api/product'
import { tree as spareTree } from '@neu/dcam-ui/api/spareType'
import { list as goodsFileList } from '@neu/dcam-ui/api/goodsFile'

export default {
  components: {
    treeselect
  },
  props: { // 根据id可判断是新建还是更新
    requireInfo: {
      required: false,
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    categories: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      specifications: null,
      specificationList: [],
      /** 资产类型树 */
      typeOptions: [],
      rules: {
        smallTypeCode: [{
          required: true,
          message: '资产分类不能为空',
          trigger: 'blur'
        }],
        quantity: [{
          required: true,
          message: '数量不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    if (this.categories === '4') {
      spareTree().then(response => {
        this.typeOptions = response.data
      })
    } else {
      tree('kj', this.categories).then(response => {
        this.typeOptions = response.data
      })
    }
  },
  methods: {
    selectType(value) {
      this.requireInfo.smallTypeName = value.title
    },
    inputType(value) {
      this.specifications = null
      if (!value) {
        this.specificationList = []
        this.requireInfo.smallTypeName = ''
      } else {
        if (this.categories === '4') {
          goodsFileList({ s_spareTypeCode: value }).then(res => {
            this.specificationList = res.data.map(l => { return { 'specification': l.name } })
          })
        } else {
          list({ 's_assetTypeCode': value }).then(res => {
            this.specificationList = res.data.map(it => {
              return {
                value: it.name
              }
            })
          })
        }
      }
    },
    change(value) {
      this.requireInfo.specifications = value || ''
    },
    querySearch(queryString, cb) {
      const specificationList = this.specificationList
      const results = queryString ? specificationList.filter(this.createFilter(queryString)) : specificationList
      cb(results)
    },
    createFilter(queryString) {
      return (m) => {
        return (m.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    }
  }
}
</script>
